<template>
  <div class="camera-history">
    <!-- 时间选择器 -->
    <div class="date-range">
      <label for="range">选择时间范围：</label>
      <select v-model="dateRange" @change="fetchCameraData" id="range">
        <option value="7">最近一周</option>
        <option value="15">最近半个月</option>
        <option value="30">最近一个月</option>
      </select>
    </div>

    <!--    &lt;!&ndash; 轮播图展示 &ndash;&gt;-->
    <!--    <div v-if="cameraData.length" class="carousel">-->
    <!--      <div v-for="(item, index) in cameraData" :key="index" class="carousel-item">-->
    <!--        <img :src="item.photoUrl" alt="Camera Image" />-->
    <!--        <p>抓取时间：{{ item.createdAt }}</p>-->
    <!--      </div>-->
    <!--    </div>-->

    <!-- 表格展示 -->
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>抓取时间</th>
            <th>预览图</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in cameraData" :key="index">
            <td>{{ item.createdAt }}</td>
            <td><img :src="item.photoUrl" alt="Camera Image" class="table-image" /></td>
            <td><button @click="viewImage(item.photoUrl)">查看图片</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";

// 摄像头抓取数据
const cameraData = ref<Array<{ photoUrl: string; createdAt: string }>>([]);
const dateRange = ref(7); // 默认展示最近一周

async function fetchCameraData() {
  try {
    const loginResponse = await axios.post("http://localhost:8080/api/login", {
      username: "root",
      password: "123"
    });
    console.log(loginResponse);
    const token = loginResponse.data.data.token;
    console.log(token);
    const response = await axios.get("http://localhost:8080/camera/api/camera-data", {
      headers: {
        Authorization: `Bearer ` + token
      }
    });
    console.log(response);
    cameraData.value = response.data;
  } catch (error) {
    console.error("获取摄像头数据失败：", error);
    throw error;
  }
}

// 查看图片
const viewImage = (url: string) => {
  window.open(url, "_blank");
};

// 初始化加载数据
onMounted(fetchCameraData);
</script>

<style scoped>
.camera-history {
  padding: 20px;
  font-family: Arial, sans-serif;
}
.date-range {
  margin-bottom: 20px;
}
.carousel {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.carousel-item {
  text-align: center;
}
.carousel-item img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}
.table-container {
  margin-top: 20px;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead {
  background-color: #f5f5f5;
}
th,
td {
  padding: 10px;
  text-align: center;
  background-color: #1a1a37;
  border: 1px solid #cccccc;
}
.table-image {
  width: 100px;
  height: 60px;
  object-fit: cover;
}
button {
  padding: 5px 10px;
  color: white;
  cursor: pointer;
  background-color: #007bff;
  border: none;
  border-radius: 3px;
}
button:hover {
  background-color: #0056b3;
}
</style>
